<!-- Horizontal Form -->
<div class="box" :class="[ editMode? 'box-warning': 'box-info']">
    <div class="box-header with-border">
        <h3 class="box-title">{{ title }}</h3>
    </div>
    <!-- /.box-header -->
    <div v-show="result" class="alert alert-dismissible" :class="[ result.ok? 'alert-success' : 'alert-danger']">
        <button @click="resetResult" type="button" class="close" aria-hidden="true">&times;</button>
        <h4><i class="icon fa" :class="[ result.ok? 'fa-check' : 'fa-ban']"></i> {{ result.title }}!</h4>
        {{ result.msg }}
    </div>
    <!-- form start -->
    <validator name="userValidation">
        <form class="form-horizontal" novalidate>
            <div class="box-body">
                <div class="form-group has-feedback" :class="{'has-success': usernameValid, 'has-error': usernameInvalid}">
                    <label for="inputUsername" class="col-sm-2 control-label">用户名</label>
                    <div class="col-sm-10">
                        <input type="text" v-model="user.username" initial="off" v-validate:username="{ required: true, minlength: 6 }" class="form-control" id="inputUsername" placeholder="输入用户名">
                        <span class="form-control-feedback glyphicon" :class="{'glyphicon-ok': usernameValid, 'glyphicon-remove': usernameInvalid}"></span>
                        <span v-show="usernameInvalid" class="help-block">*{{ usernameError }}</span>
                    </div>
                </div>
                <div class="form-group has-feedback" :class="{'has-success': passwordValid, 'has-error': passwordInvalid}">
                    <label for="inputPassword" class="col-sm-2 control-label">密码</label>
                    <div class="col-sm-10">
                        <input type="password" v-model="user.password" initial="off" v-validate:password="{ required: true, minlength: 6 }" class="form-control" id="inputPassword" placeholder="输入密码">
                        <span class="form-control-feedback glyphicon" :class="{'glyphicon-ok': passwordValid, 'glyphicon-remove': passwordInvalid}"></span>
                        <span v-show="passwordInvalid" class="help-block">*{{ passwordError }}</span>
                    </div>
                </div>
                <div class="form-group has-feedback" :class="{'has-success': realNameValid, 'has-error': realNameInvalid}">
                    <label for="inputRealName" class="col-sm-2 control-label">姓名</label>
                    <div class="col-sm-10">
                        <input v-model="user.realName" initial="off" v-validate:real-name="{ cnname: true }" type="text" class="form-control" id="inputRealName" placeholder="输入真实姓名">
                        <span class="form-control-feedback glyphicon" :class="{'glyphicon-ok': realNameValid, 'glyphicon-remove': realNameInvalid}"></span>
                        <span v-show="realNameInvalid" class="help-block">*{{ realNameError }}</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">性别</label>
                    <div class="col-sm-10">
                        <label class="radio-inline">
                            <input type="radio" v-model="user.sex" value="0"> 保密
                        </label>
                        <label class="radio-inline">
                            <input type="radio" v-model="user.sex" value="1"> 男
                        </label>
                        <label class="radio-inline">
                            <input type="radio" v-model="user.sex" value="2"> 女
                        </label>
                    </div>
                </div>
                <div class="form-group has-feedback" :class="{'has-success': emailValid, 'has-error': emailInvalid}">
                    <label for="inputEmail" class="col-sm-2 control-label">邮箱</label>
                    <div class="col-sm-10">
                        <input v-model="user.email" initial="off" v-validate:email="{ email: true }" type="text" class="form-control" id="inputEmail" placeholder="输入电子邮箱">
                        <span class="form-control-feedback glyphicon" :class="{'glyphicon-ok': emailValid, 'glyphicon-remove': emailInvalid}"></span>
                        <span v-show="emailInvalid" class="help-block">*{{ emailError }}</span>
                    </div>
                </div>
                <div class="form-group has-feedback" :class="{'has-success': mobileValid, 'has-error': mobileInvalid}">
                    <label for="inputMobile" class="col-sm-2 control-label">手机</label>
                    <div class="col-sm-10">
                        <input v-model="user.mobile" initial="off" v-validate:mobile="{ mobile: true }" type="text" class="form-control" id="inputMobile" placeholder="输入手机号码">
                        <span class="form-control-feedback glyphicon" :class="{'glyphicon-ok': mobileValid, 'glyphicon-remove': mobileInvalid}"></span>
                        <span v-show="mobileInvalid" class="help-block">*{{ mobileError }}</span>
                    </div>
                </div>
                <!--
                <div class="form-group">
                    <label for="message" class="col-sm-2 control-label">Message</label>
                    <div class="col-sm-10">
                        <input v-model="thisMessage" type="text" class="form-control" id="message" placeholder="输入Message">
                    </div>
                </div>-->
            </div>
            <!-- /.box-body -->
            <div class="box-footer">
                <button @click="cancel" type="button" class="btn btn-default">取消</button>
                <button @click="submit" type="button" class="btn pull-right" :class="[ editMode? 'btn-warning': 'btn-info']" >提交</button>
            </div>
            <!-- /.box-footer -->
        </form>
    </validator>
</div>